<template>
  <!-- 参考里程/油电量 -->
  <div class="page-form-block" v-if="userStore.enterpriseDetail.tboxEnabled">
    <summary-info :summaryList="summaryBox" />
  </div>
</template>

<script setup name="boxModal">
  import { ref, computed, watch } from 'vue'
  import { getByCarIdDetail } from '@/api/asset/carTbox'
  import summaryInfo from './shortOrder/giveCar/summary-info.vue'
  import useUserStore from '@/store/modules/user'
  const userStore = useUserStore()
  const props = defineProps({
    carId: {
      type: String,
      default: '',
    },
  })
  watch(
    () => props.carId,
    (val) => {
      if (val) {
        getByCarIdDetail({ id: props.carId }).then((res) => {
          summaryBoxData.value.totalMileage = res.result?.totalMileage
          summaryBoxData.value.oilRemain = res.result?.oilRemain
          summaryBoxData.value.batRemain = res.result?.batRemain
        })
      }
    },
    {
      deep: true,
      immediate: true,
    }
  )

  // 参考里程/油电量
  const summaryBoxData = ref({})
  const summaryBox = computed(() => {
    const boxInfoVal = summaryBoxData.value
    console.log('boxInfoVal', boxInfoVal.totalMileage)
    return [
      [
        {
          label: '参考里程（车载BOX）',
          value: boxInfoVal.totalMileage !== undefined ? boxInfoVal.totalMileage : '无设备',
        },
        {
          label: '参考油(电)量（车载BOX）',
          value: boxInfoVal.totalMileage !== undefined ? boxInfoVal.oilRemain || boxInfoVal.batRemain : '无设备',
          labelWidth: 200,
        },
      ],
    ]
  })
</script>
<style lang="less" scoped>
  .page-form-block {
    background: #e8f3ff;
  }
  :deep(.field-item .field-value) {
    color: #1890ff;
  }
</style>
